<template>
    <div class="play" v-if="isShow">
        <span @click="close">X</span>
        <div class="video">
            <video height="800" controls>
                <source :src="src" type="video/mp4">
            </video>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps(['isShow', "src"])
const emits = defineEmits(['close'])
function close() {
    console.log(1);
    emits('close', { show: false, src: '' })
}
</script>

<style scoped lang="less">
.play {
    width: 100vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .5);

    span {
        position: absolute;
        top: 2%;
        right: 3%;
        color: white;
        cursor: pointer;
        font-size: 40px;
    }

    .video {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
}
</style>